<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传与预览</title>
    <link href="static/css/all.min.css" rel="stylesheet">
    <link href="static/css/style.css" rel="stylesheet" type="text/tailwindcss">
    <script src="static/js/tailwindcss.js"></script>
    <script src="static/js/index.js"></script>
</head>

<body class="font-inter bg-neutral-100 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <input id="base_url" style="display: none;" type="text" value={{ base_url }}>
        <!-- 页面标题 -->
        <header class="mb-8 text-center">
            <h1 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-neutral-700 mb-2">图片上传与预览</h1>
            <p class="text-neutral-500 max-w-2xl mx-auto">支持多图上传，实时预览和上传进度显示。拖放图片到指定区域或点击选择文件进行上传。</p>
        </header>

        <!-- 主内容区 -->
        <main class="bg-white rounded-xl shadow-lg p-6 md:p-8 mb-8">
            <!-- 上传区域 -->
            <div class="mb-8">
                <div id="drop-area"
                    class="border-2 border-dashed border-neutral-300 rounded-xl p-8 text-center upload-card-hover cursor-pointer">
                    <div class="upload-icon text-primary text-4xl mb-4">
                        <i class="fa-solid fa-cloud-upload-alt"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-neutral-700 mb-2">拖放图片到这里上传</h3>
                    <p class="text-neutral-500 mb-4">或者</p>
                    <label
                        class="inline-block bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg transition-all duration-300 cursor-pointer">
                        <span>选择文件</span>
                        <!-- <input type="file" id="file-input" class="hidden" multiple accept="audio/*,video/*,image/*"> -->
                        <input type="file" id="file-input" class="hidden" multiple accept="image/*">
                    </label>
                    <p class="text-xs text-neutral-400 mt-4">支持 JPG, PNG, GIF 格式，单张图片不超过5MB</p>
                </div>
            </div>

            <!-- 上传进度区域 -->
            <div id="upload-progress-container" class="mb-8 hidden">
                <h3 class="text-lg font-semibold text-neutral-700 mb-3">上传进度</h3>
                <div id="upload-progress-list" class="space-y-3">
                    <!-- 进度项将通过JavaScript动态添加 -->
                </div>
            </div>

            <!-- 图片预览区域 -->
            <div class="mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-neutral-700">图片预览</h3>
                    <div class="flex space-x-2">
                        <button id="clear-all"
                            class="text-neutral-500 hover:text-danger transition-colors duration-300">
                            <i class="fa-solid fa-trash"></i> 清空全部
                        </button>
                    </div>
                </div>
                <div id="preview-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                    <div id="empty-preview"
                        class="col-span-full flex flex-col items-center justify-center py-12 border-2 border-dashed border-neutral-200 rounded-xl">
                        <div class="text-neutral-300 text-5xl mb-4">
                            <i class="fa-regular fa-image"></i>
                        </div>
                        <p class="text-neutral-400">暂无上传的图片</p>
                    </div>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="text-center text-neutral-400 text-sm py-4">
            <p>© 2025 图片上传与预览工具 | 设计与开发</p>
        </footer>
    </div>
</body>

</html>